<template>
  <div class="article-detail">
    <Wapper :bgImg="bgImg">
      <template #header>
        <ArticleDetailHeader />
      </template>
      <template #main>
        <ArticleDetailMain />
      </template>
      <template #aside>
        <Aside>
          <NewestArticle />
        </Aside>
      </template>
    </Wapper>
  </div>
</template>

<script>
import Wapper from "$components/Wapper";
import ArticleDetailHeader from "./components/ArticleDetailHeader";
import ArticleDetailMain from "./components/ArticleDetailMain";
import Aside from "$components/aside/Aside";
import NewestArticle from "$components/aside/NewestArticle";
export default {
  name: "ArticleDetail",
  components: {
    Wapper,
    ArticleDetailHeader,
    ArticleDetailMain,
    Aside,
    NewestArticle,
  },
  data() {
    return {
      bgImg: "/article.png",
    };
  },
};
</script>

<style lang="stylus" scoped>
.article-detail >>> .el-header {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.article-detail >>> .el-footer {
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
</style>